<template xmlns="">
  <div>

    <div style="margin-bottom: 30px">
      <RouterLink to="/test" > 跳转到test.vue </RouterLink> |
      <a href="/test" > 通过a标签跳转到test.vue </a>
    </div>

    <div style="margin-bottom: 30px">
      <el-button type="primary" @click="router.push('/manager/test')">push跳转</el-button>
      <el-button type="primary" @click="router.replace('/manager/test')">replace跳转回不来的</el-button>
<!--      编程式路由，要导入router对象-->
    </div>

    <div>
      <el-button type="primary" @click="router.push('/manager/test?id=1&name=奶龙')">路由传参id=1&name=奶龙</el-button>
      <el-button type="primary" @click="router.push({ path:'/manager/test' ,query:{id:2 , name:'奶龙2'} })">路由传参id=2&name=奶龙2</el-button>
      //传参方式二选一
    </div>


    <div style="margin: 30px">
      <el-input  clearable v-model="data.input"  :prefix-icon="Search"   style="width: 240px" placeholder="Please input" />{{ data.input }}
      <el-input v-model="data.descr"  readonly :prefix-icon="Search" type="textarea" style="width: 240px" placeholder="Please input" />

    </div>

    <div style="margin: 30px">
      <el-select
          multiple
          value-key="id"
          clearable
          v-model="data.value"
          placeholder="Select"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item.id"
            :label="item.label"
            :value="item.name"
        />
      </el-select> {{data.value}}
    </div>

    <div style="margin: 30px">
      <el-radio-group v-model=data.sex>
        <el-radio value="男" label="man">男</el-radio>
        <el-radio value="女" label="woman">女</el-radio>
       </el-radio-group> <span style="margin-left: 50px">{{data.sex}}</span>
    </div>

    <div>
      <el-radio-group v-model="data.tag" size="large">
        <el-radio-button label="New York" value="1" />
        <el-radio-button label="Washington" value="2" />
        <el-radio-button label="Los Angeles" value="3" />
        <el-radio-button label="Chicago" value="4" />
      </el-radio-group>{{data.tag}}
    </div>

    <div>
      <el-checkbox-group v-model="data.checkList">
        <el-checkbox v-for="item in data.options" :key="item.id" :label="item.label" :value="item.name" />
        </el-checkbox-group>
      <span style="margin-left: 50px"> {{data.checkList}} </span>
    </div>

    <div>
      <el-image src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"
                style="width:100px;  margin: 30px"  />
      <el-image :src="img" style="width:100px;  margin: 30px" :preview-src-list="[img,'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg']" />
      <!--    //:preview-src-list="[img]"需要是数组-->


        <el-carousel trigger="click" height="450px" style="width: 600px">
          <el-carousel-item v-for="item in data.imgs" :key="item">
            <img style="width: 100% ;height: 500px" :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
    </div>

    <div style="margin: 30px 0">
      <el-date-picker
          v-model="data.date1"
          type="date"
          placeholder="请选择日期"
          format="YYYY-MM/DD"
          value-format="YYYY-MM-DD"
       />{{data.date1}}

      <el-date-picker
          v-model="data.date2"
          type="datetime"
          placeholder="请选择日期时间"
          format="YYYY-MM/DD-hh:mm:ss"
          value-format="YYYY-MM-DD-hh:mm:ss"
      />{{data.date2}}

      <el-date-picker
          v-model="data.date3"
          type="daterange"
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :size="size"
          format="YYYY-MM/DD"
          value-format="YYYY-MM-DD"
      />{{data.date3}}  {{data.date3?.length? data.date3[0]:''}}  {{data.date3?.length? data.date3[1]:''}}
      //datarange(data3)是数组，有两个值
    </div>

    <div style="margin: 30px 0">
      <el-table :data="data.tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" header-align="center"/>
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="content" label="内容" >
          <template #default="scope">
          <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>




        <el-table-column fixed="right" label="Operations" min-width="120">
          <template #default="scope">
          {{scope.row.id}}
<!--            {{随便写的.row}}可以展示原始数据-->
            <el-button type="primary" @click="editContent(scope.row) ">编辑富文本</el-button>
            <el-button type="primary" @click="edit(scope.row) ">编辑</el-button>
            <el-button type="danger" @click="del(scope.row.id) ">删除</el-button>
          </template>
        </el-table-column>
      </el-table>



      <div>
        <el-pagination
            v-model:current-page="data.currentPage"
            v-model:page-size="data.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :size="size"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.tableData.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog v-model="data.dialogVisible" title="编辑行对象" width="500">
     <div style="padding: 20px">
       <div>日期：{{data.row.date}}</div>
       <div>姓名：{{data.row.name}}</div>
       <div>地址：{{data.row.address}}</div>
     </div>
    </el-dialog>

    <el-dialog v-model="data.formContentVisible" title="编辑内容" width="800">
      <div style="padding: 20px">
        <div style="border: 1px solid #ccc; width: 100%">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="data.form.content"
            :mode="mode"
            :defaultConfig="editorConfig"
            @onCreated="handleCreated"
        />
      </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.formVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveContent">保存</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>

import {reactive} from "vue";
import {Calendar, Search} from "@element-plus/icons-vue";
import img from '@/assets/logo.svg'
import lun1 from '@/assets/lun1.png'
import lun2 from '@/assets/lun2.png'
import lun3 from '@/assets/lun3.png'
import router from "@/router/index.js";
import request from "@/utils/request.js";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const data = reactive({
  input :'hhh',
  descr :'都是发范德萨范德萨分撒旦范德萨分的撒幅度萨芬的萨芬的幸存者幅度萨芬的萨芬的萨芬的萨芬的萨芬的萨芬的萨芬的撒反对萨芬十大的撒都是案发当时萨芬的撒反对撒范德萨都是范德萨范德萨的',
  value :' ',
  options :[{id:1,label:'苹果',name:'苹果'},{id:2,label:'苹果',name:'苹果2'},{id:3,label:'栗子',name: '栗子'},{id:4,label:'香蕉',name:'香蕉'}],
  sex:'',
  tag:'2',
  checkList:[ ],//多选要数组
  imgs:[lun1,lun2,lun3],
  date1:'',
  date2:'',
  date3:'',
  currentPage:1,
  pageSize:5,

  tableData:[
    {id:1 , date:'2025.10.1.',name:'奶龙1',address:'合肥', content:'<h1>盒盒盒</h1>'},
    {id:2 , date:'2025.10.2.',name:'奶龙2',address:'合肥', content:'<h1 style="color: red">盒盒盒</h1>'},
    {id:3 , date:'2025.10.3.',name:'奶龙3',address:'合肥', content:'<h1 style="font-size: 12px">盒盒盒</h1>'},
    {id:4 , date:'2025.10.4.',name:'奶龙4',address:'合肥', content:'<h1>盒盒盒</h1>'},
    {id:5 , date:'2025.10.5.',name:'奶龙5',address:'合肥'},
    {id:6 , date:'2025.10.6.',name:'奶龙6',address:'合肥'},
  ],
  dialogVisible:false,
  row:null,
  // dialogvisible是控制弹窗显示的变量
  employeeList:[],
  formContentVisible:false,
  form:{},

})

const editContent = (row) => {
  data.form = row
  data.formContentVisible=true
}

const saveContent = () => {
  data.formContentVisible=false
}

/* wangEditor5 初始化开始 */
const baseUrl = 'http://localhost:9090' //文件上传的接口，还没用上
const editorRef = shallowRef() // 编辑器实例，必须用 shallowRef
const mode = 'default'
const editorConfig = { MENU_CONF: {} }

// 图片上传配置，没用上
editorConfig.MENU_CONF['uploadImage'] = {
  server: baseUrl + '/files/wang/upload', // 服务端图片上传接口
  fieldName: 'file' // 服务端图片上传接口参数
}

// 组件销毁时，也及时销毁编辑器，否则可能会造成内存泄漏
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

// 记录 editor 实例，重要！
const handleCreated = (editor) => {
  editorRef.value = editor
}

/* wangEditor5 初始化结束 */

request.get('/employee/selectAll').then(res =>{
  console.log(res)  //控制台打印数据
  data.employeeList = res.data
  console.log(data.employeeList)
})

const del = (id) => {
  alert("删除ID=" + id + "的数据");
}

const edit = (row) => {
  data.row=row
  data.dialogVisible = true
}

</script>